<template>
	<transition name="slide-down">
		<div class="title-wrapper" v-show="menuVisble">
			<div class="title-left">
				<span @click="handleClickBack" class="icon-back"></span>
			</div>
			<div class="title-right">
				<div class="icon-wrapper">
					<span class="icon-cart"></span>
				</div>
				<div class="icon-wrapper">
					<span class="icon-shelf"></span>
				</div>
				<div class="icon-wrapper">
					<span class="icon-more"></span>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ebookMixin } from '../../utils/mixin.js'
	export default {
		name: 'ebookTitle',
		mixins: [ebookMixin],
		data() {
			return {
				
			}
		},
		computed:{
			
		},
		methods: {
			// 处理点击回退事件
			handleClickBack() {
				console.log('处理点击回退事件')
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	.title-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
		display: flex;
		width: 100%;
		height: pxTorem(48);
		background: #fff;
		box-shadow: 0 pxTorem(8) pxTorem(8) rgba(0,0,0,.15);
		font-size: pxTorem(20);
		.title-left {
			flex: 0 0 pxTorem(60);
			@include  flexCenter;
		}
		.title-right {
			flex: 1;
			@include  flexRight;
			.icon-wrapper {
				flex: 0 0 pxTorem(40);
				@include  flexCenter;
				.icon-cart,.icon-shelf {
					font-size: pxTorem(22);
				}
			}
		}
	}

</style>
